<template>
  <el-dialog
      :title="flag===1?'新增用户':'编辑用户'"
      v-el-drag-dialog
      v-if="showDom"
      :visible.sync="visible"
      width="800px"
      center
      @closed="closed">
    <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="80px">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="form.loginName" placeholder="请输入用户登录账号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="form.realName" placeholder="请输入用户姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="idType">
            <el-select v-model="form.idType" placeholder="请选择证件类型">
              <el-option label="身份证" :value="1"></el-option>
              <el-option label="居住证" :value="2"></el-option>
              <el-option label="客户本" :value="3"></el-option>
              <el-option label="签证" :value="4"></el-option>
              <el-option label="军人证" :value="5"></el-option>
              <el-option label="团员证" :value="6"></el-option>
              <el-option label="党员证" :value="7"></el-option>
              <el-option label="港澳通行证" :value="8"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="idNumber">
            <el-input v-model="form.idNumber" placeholder="请输入证件号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="userIphone">
            <el-input v-model="form.userIphone" placeholder="请输入用户联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色身份" prop="roleId">
            <el-select v-model="form.roleId" placeholder="请选择用户角色">
              <el-option
                  v-for="item in role"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="accountEnabled">
            <el-select v-model="form.accountEnabled" placeholder="请选择账号是否启用">
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色厂家" prop="vendorId">
            <el-select v-model="form.vendorId" placeholder="请选择用户角色所属厂家">
              <el-option
                  v-for="item in Vendor"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" resize="none" v-model="form.remarks" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注意：">
            <div class="cff5 be-careful-item">【1】账号有效期默认为：12个月</div>
            <div class="cff5 be-careful-item">【2】密码有效期默认为：3个月</div>
            <div class="cff5 be-careful-item">【3】初始化默认密码为：Yt@2022</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="" @click="hide">关 闭</el-button>
      <el-button v-if="flag===1" size="small" type="primary" @click="confirmTap">添 加</el-button>
      <el-button v-else size="small" type="primary" @click="confirmTap">保存修改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  add_user,
  get_roleList,
  del_user,
  put_quitUser,
  put_resetPassword,
  put_editUserInfo,
  get_VendorList,
} from "@/apis/user/userApi";

import {getCookie} from '@/utils/auth'
import {menuFilter} from '@/utils'
import {mobile, IDkerd, HKId, OMId, passPort, MilitaryID} from '@/utils/reg'

export default {
  props: {},
  data() {
    return {
      flag: 1,
      showDom: false,
      visible: false,
      innerVisible: false,
      form: {
        loginName: "",
        realName: "",
        idType: "",
        idNumber: "",
        userIphone: "",
        accountEnabled: "",
        vendorId: "",
        roleId: "",
        remarks: "",
      },
      rules: {
        loginName: [
          {required: true, message: "请输入登录名", trigger: "blur"}
        ],
        realName: [
          {required: true, message: "请输入角色名", trigger: "blur"}
        ],
        idType: [
          {required: true, message: "请选择证件类型", trigger: "change"}
        ],
        idNumber: [
          {required: true, message: "请输入证件号码", trigger: "blur"}
        ],
        userIphone: [
          {required: true, message: "请输入联系电话", trigger: "blur"},
          {required: true, message: "请输入正确的联系电话", pattern: mobile, trigger: ['blur']},
        ],
        roleId: [
          {required: true, message: "请选择账号角色", trigger: "change"}
        ],
        accountEnabled: [
          {required: true, message: "请选择账号是否启用", trigger: "change"}
        ],
        vendorId: [
          {required: true, message: "请选择账号角色厂家", trigger: "change"}
        ],
      },
      role: [],
      Vendor: []
    };
  },
  computed: {},
  mounted() {

  },
  created() {

  },
  methods: {
    show(flag, item) {
      this.flag = flag
      this.showDom = true
      this.visible = true
      this.getRile()
      this.$nextTick(() => {
        this.form = item;
        this.$refs.form.resetFields();
      })
    },
    hide() {
      this.visible = false
    },
    closed() {
      this.showDom = false
    },
    closeN() {
      this.innerVisible = false;
    },
    //获取角色下拉 与 厂家下拉
    getRile() {
      get_roleList().then((res) => {
        let {data} = res.data;
        this.role = []
        for (const key in data) {
          this.role.push({value: key, label: data[key]});
        }
      });
      get_VendorList().then((res) => {
        let {data} = res.data;
        this.Vendor = []
        for (const key in data) {
          this.Vendor.push({value: key, label: data[key]});
        }
      });
    },
    // 确定添加lib
    confirmTap() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.flag === 1) {
            this.form['vendor.id'] = this.form.vendorId
            this.form['role.id'] = this.form.roleId
            add_user(this.form).then((res) => {
              let {msg} = res.data;
              this.hide()
              this.$message.success(msg);
              this.$emit('success')
            });
          } else if (this.flag === 2) {
            this.form['vendor.id'] = this.form.vendorId
            this.form['role.id'] = this.form.roleId
            put_editUserInfo(this.form).then((res) => {
              let {msg} = res.data;
              this.hide()
              this.$message.success(msg);
              this.$emit('success')
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .form-box-group {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .form-box-item {
    padding: 15px 50px 15px 15px;
    border-bottom: solid 1px #ffffff;

    &:last-child {
      border-bottom: none;
    }
  }
</style>